<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>webpack-logo</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      height: 100vh;
      background-color: #2b3a42;
      display: flex;
      align-items: center;
      align-content: center;
      justify-content: center;
    }

    ul {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    
    .webpack-logo {
      width: 100%;
      height: 200px;
      position: relative;
    }

    .cube-inner {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 50px;
      height: 50px;
      margin: -25px 0 0 -25px;
      /* background-color: lightblue; */
      transform-style: preserve-3d;
      transform: rotateX(-33.5deg) rotateY(45deg);
      /* transform-origin: 50% 50%; */
      animation: cube-inner-rotate 6s ease-in-out infinite;
    }

    @keyframes cube-inner-rotate {
      0% {
        transform: rotateX(-33.5deg) rotateY(45deg);
      }

      50%, 100% {
        transform: rotateX(-33.5deg) rotateY(-315deg);
      }
    }

    .cube-inner li {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: #175d96;
      border: 1px solid white;
    }

    .cube-inner .top {
      /* background-color: rgba(255, 99, 255, 0.6); */
      transform: rotateX(90deg) translateZ(25px);
    }

    .cube-inner .bottom {
      /* background-color: rgba(111, 0, 0, 0.6); */
      transform: rotateX(-90deg) translateZ(25px);
    }

    .cube-inner .front {
      /* background-color: rgba(255, 188, 255, 0.6); */
      transform: rotateY(0deg) translateZ(25px);
    }

    .cube-inner .back {
      /* background-color: rgba(255, 0, 255, 0.6); */
      transform: rotateY(-180deg) translateZ(25px);
    }

    .cube-inner .left {
      /* background-color: rgba(255, 0, 0, 0.6); */
      transform: rotateY(-90deg) translateZ(25px);
    }

    .cube-inner .right {
      /* background-color: rgba(255, 255, 0, 0.6); */
      transform: rotateY(90deg) translateZ(25px);
    }

    .cube-outer {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 100px;
      height: 100px;
      margin: -50px 0 0 -50px;
      /* background-color: lightblue; */
      transform-style: preserve-3d;
      transform: rotateX(-33.5deg) rotateY(45deg);
      animation: cube-oute-rotate 6s ease-in-out infinite;
    }

    @keyframes cube-oute-rotate {
      0% {
        transform: rotateX(-33.5deg) rotateY(45deg);
      }

      50%, 100% {
        transform: rotateX(-33.5deg) rotateY(405deg);
      }
    }

    .cube-outer li {
      position: absolute;
      top: 0;
      left: 0;
      width: 100px;
      height: 100px;
      background-color: rgba(141, 214, 249, 0.5);
      border: 1px solid white;
    }

    .cube-outer .top {
      transform: rotateX(90deg) translateZ(50px);
    }

    .cube-outer .bottom {
      transform: rotateX(90deg) translateZ(-50px);
    }

    .cube-outer .front {
      transform: rotateY(-180deg) translateZ(-50px);
    }

    .cube-outer .back {
      transform: rotateY(0) translateZ(-50px);
    }

    .cube-outer .left {
      transform: rotateY(90deg) translateZ(-50px);
    }

    .cube-outer .right {
      transform: rotateY(90deg) translateZ(50px);
    }

   
  </style>
</head>
<body>

  <div class="webpack-logo">
    <!-- cube-inner -->
     <ul class="cube-inner">
      <li class="top"></li>
      <li class="bottom"></li>
      <li class="front"></li>
      <li class="back"></li>
      <li class="left"></li>
      <li class="right"></li>
     </ul>

    <!-- cube-outer -->
    <ul class="cube-outer">
      <li class="top"></li>
      <li class="bottom"></li>
      <li class="front"></li>
      <li class="back"></li>
      <li class="left"></li>
      <li class="right"></li>
    </ul>
  </div>
  
</body>
</html>